<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="container">
      <div class="text-wraper"></div>
    </div>

    <script>
      //添加文字

      const textWraper = document.querySelector(".text-wraper");

      const lieNum = 31; // 列数

      const textWraperHeight = textWraper.offsetHeight;

      // 随机区间内的整数
      function getRadomInt(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min)) + min;
      }

      const fragment = document.createDocumentFragment();

      const speed = 60;
      let translateZ = 10;

      for (let i = 0; i < lieNum; i++) {
        // 得出中间数 没有中间就向下取一个
        let num = Math.floor(lieNum / 2);

        if (i <= num) {
          translateZ += speed;
        } else {
          translateZ -= speed;
        }

        const element = document.createElement("span");
        // 中间那个加类名
        if (i === num) {
          element.classList.add("center");
        } else {
          // 随便减个数防止超出太多
          element.style.paddingTop =
            getRadomInt(0, textWraperHeight - 80) + "px";
        }

        element.style.transform = `translateZ(${translateZ}px)`;
        element.innerText = "测试文字";
        fragment.appendChild(element);
      }

      textWraper.appendChild(fragment);
    </script>
  </body>
</html>
